<template>
	<view class="shop-page m-h100  flex flex-column">
		<u-tabs class="border-bottom py-1 sticky bgcolor1" :list="list" lineColor="#507EF7" lineHeight="5" lineWidth="40"
			:activeStyle="{
            color: '#507EF7',
            fontWeight: 'bold',
        }" :inactiveStyle="{
            color: '#333333',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :current="tabActive"
			@change="changeTab"></u-tabs>
		<view class="flex flex-wrap justify-between w-100 p-3">
			<view class="w-48 mb-3 bgcolor1 rounded" v-for="item in 14" @click="goDetails(item)">
				<image class="shopimg rounded"
					src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00164-1636.jpg" mode="aspectFill">
				</image>
				<view class="px-1 pb-1">
					<view class="mb-1">10kg新鲜水果</view>
					<view class="flex justify-between">
						<view class="ftcolor2">兑换积分</view>
						<view class="font-weight-bold ftcolor2">100</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabActive: 0,
				title: 'Hello',
				active: 0,
				list: [{
					name: '推荐'
				}, {
					name: '男装'
				}, {
					name: '食品'
				}, {
					name: '鞋包'
				}, {
					name: '百货'
				}, {
					name: '水果'
				}, ]
			}
		},
		onLoad() {

		},
		methods: {
			// 切换底部tab
			changeTab(e) {
				this.tabActive = e.index
			},
			// 选择tab标签
			chooseActive(item) {
				this.active = item
			},
			// 跳转至详情页
			goDetails(item) {
				uni.navigateTo({
					url: '/shopPages/index/goodDetails'
				})
			}
		}
	}
</script>

<style lang="scss">
	.shop-page {
		.shopimg {
			width: 100%;
			height: 256rpx;
		}
	}
</style>